import DocCardBox from "@/components/doc-card"
import React from "react"
import { demoJson } from "./demo"
import { DocApi, DocTitle } from "@/components"
import { useTranslation } from "react-i18next"
import { Ellipsis } from "esy-ui"

const t1 = "默认不省略~默认不省略~默认不省略~默认不省略~默认不省略~默认不省略~默认不省略~默认不省略~默认不省略~"

const t2 = "单行省略~单行省略~单行省略~单行省略~单行省略~单行省略~单行省略~单行省略~单行省略~单行省略~单行省略~"
const t3 = "多行省略~多行省略~多行省略~多行省略~多行省略~多行省略~多行省略~多行省略~多行省略~多行省略~多行省略~多行省略~多行省略~多行省略~多行省略~"
const leftList = [
    {
        titleKey: "oe_title_1",
        hash: "oe-l-demo1",
        coms: [<Ellipsis key={0} text={t1} />],
        comsJson: [demoJson(t1)],
        desc: [{ text: "oe_1_1_1" }]
    },
    {
        titleKey: "oe_title_3",
        hash: "oe-l-demo2",
        coms: [<Ellipsis key={0} text={t3} className="line-clamp-2 before:h-6" />],
        comsJson: [demoJson(t3, "line-clamp-2 before:h-6")],
        desc: [
            {
                textType: "texts",
                texts: [{ text: "oe_3_1_1" }]
            }
        ]
    }
]

const rightList = [
    {
        titleKey: "oe_title_2",
        hash: "oe-r-demo1",
        coms: [<Ellipsis key={0} text={t2} className="truncate" />],
        comsJson: [demoJson(t2, "truncate")],
        desc: [
            {
                textType: "texts",
                texts: [{ text: "oe_2_1_1" }, { text: "oe_2_1_2", textType: "tag" }, { text: "oe_2_1_3" }]
            }
        ]
    }
]

function Ellipsiss() {
    const { t } = useTranslation()

    const apiList = [
        {
            title: "EllipsisProps",
            data: [
                {
                    schema: "text",
                    type: "string",
                    defaultValue: "-",
                    isRequire: t("yes"),
                    desc: t("desc_oe_1")
                },
                {
                    schema: "hiddenText",
                    type: "ReactNode",
                    defaultValue: "收起",
                    isRequire: t("no"),
                    desc: t("desc_oe_2")
                },
                {
                    schema: "showText",
                    type: "ReactNode",
                    defaultValue: "展开",
                    isRequire: t("no"),
                    desc: t("desc_oe_3")
                },
                {
                    schema: "expandLen",
                    type: "number",
                    defaultValue: "2",
                    isRequire: t("no"),
                    desc: t("desc_oe_4")
                },
                {
                    schema: "onClick",
                    type: "() => void",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_oe_5")
                },
                {
                    schema: "onTouchStart",
                    type: "() => void",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_oe_6")
                },
                {
                    schema: "classNames",
                    type: "EllipsisClassNames",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_oe_7")
                }
            ]
        }
    ]
    return (
        <div>
            <DocTitle title="Ellipsis" desc="ellipsisDesc" />
            <DocCardBox leftList={leftList} rightList={rightList} />
            <DocApi list={apiList} />
        </div>
    )
}

export default Ellipsiss
